import React, {PureComponent, Fragment} from 'react';
import {connect} from 'dva';
import moment from 'moment';
import {Link} from 'dva/router';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Tabs,
  Table,
} from 'antd';
const {RangePicker} = DatePicker;
import StandardTable from 'components/OrderTable';
import {status, statusMap} from './orderStatus';
import styles from './OrderList.less';
import {stringify} from 'qs';
import {DATA_HOST,} from '../../utils/setting';
import G from '../../utils/g';

const { TabPane } = Tabs;
const FormItem = Form.Item;
const {Option} = Select;
const getValue = obj =>
  Object.keys(obj)
    .map(key => obj[key])
    .join(',');

const columns = [
  {
    title: '结算号',
    dataIndex: 'settlement_batch',
    key: 'settlement_batch',
  },
  {
    title: '商家',
    dataIndex: 'goods_nickname',
    key: 'goods_nickname',
  },
  {
    title: '订单数',
    dataIndex: 'count',
    key: 'count',
  },
  {
    title: '金额',
    dataIndex: 'price',
    key: 'price',
  },
  {
    title: '利润',
    dataIndex: 'profit_subtotal',
    key: 'profit_subtotal',
  },
  {
    title: '利润率',
    dataIndex: 'profit_margin',
    key: 'profit_margin',
  },
  {
    title: '状态',
    dataIndex: 'settlement_status',
    key: 'settlement_status',
    render: (text)=>text === 1 ? '已结算' : '待结算'
  },
  {
    title: '结算金额',
    dataIndex: 'settlement_price',
    key: 'settlement_price',
  },
  {
    title: '操作',
    render: (a, b) => (
      <Fragment>
        <Link to={`business-pay-detail?id=${b.settlement_batch}`}>详情</Link>
      </Fragment>
    ),
  },
];


@connect(({businessPay, loading}) => ({
  businessPay,
  loading: loading.models.businessPay,
}))
@Form.create()
export default class TableList extends PureComponent {
  state = {
    formValues: {},
  };

  componentDidMount() {
    const {dispatch} = this.props;
    dispatch({
      type: 'businessPay/fetchPayed',
      payload: {

      }
    });
  }

  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const {dispatch} = this.props;
    const {formValues} = this.state;

    const filters = Object.keys(filtersArg).reduce((obj, key) => {
      const newObj = {...obj};
      newObj[key] = getValue(filtersArg[key]);
      return newObj;
    }, {});

    const params = {
      startIndex: ( pagination.current - 1 ) * pagination.pageSize,  //此处峻吉分页需要是第一项的序号，如第二页传10，而不是具体的分页码1，2，3
      pageSize: pagination.pageSize,
      ...formValues,
      ...filters,
    };
    if (sorter.field) {
      params.sorter = `${sorter.field}_${sorter.order}`;
    }

    dispatch({
      type: 'businessPay/fetchPayed',
      payload: params,
    });
  };

  render() {
    const {businessPay: { payedBusinessList}, loading} = this.props;

    return (
      <div>
        <div className={styles.tableList}>
          <StandardTable rowKey="settlement_batch" loading={loading} data={payedBusinessList} columns={columns} onChange={this.handleStandardTableChange}  />
        </div>
      </div>
    );
  }
}
